<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        @include('partials.head')
    </head>
    <body class="min-h-screen bg-white ">
        <!-- 侧边栏 -->
        <div class="fixed inset-y-0 left-0 z-50 w-64 border-r border-zinc-200 bg-zinc-50 flex flex-col h-full">
            
            <!-- 顶部区域 -->
            <div class="flex-none">
                <!-- Logo -->
                <a href="{{ route('dashboard') }}" class="mt-6 mr-5 flex items-center space-x-2 px-4" wire:navigate>
                    <x-app-logo />
                </a>

                <!-- 导航列表 -->
                <nav class="mt-8 px-2">
                    <div class="space-y-6">
                        <div>
                            <h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                                {{ __('Platform') }}
                            </h3>
                            <div class="mt-2 space-y-1">
                                <a href="{{ route('dashboard') }}" 
                                class="group flex items-center px-3 py-2 text-sm font-medium rounded-md {{ request()->routeIs('dashboard') ? 'bg-zinc-200 text-zinc-900 ' : 'text-zinc-700 hover:bg-zinc-200  ' }}" 
                                wire:navigate>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                                    </svg>
                                    {{ __('Dashboard') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>

            <!-- 中间弹性区域 -->
            <div class="flex-grow"></div>

            <!-- 底部区域 -->
            <div class="flex-none mt-auto">
                <!-- 底部导航 -->
                <nav class="px-2 py-4">
                    <div class="space-y-1">
                        <a href="https://github.com/laravel/livewire-starter-kit" 
                        target="_blank"
                        class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-zinc-700 hover:bg-zinc-200  ">
                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                            {{ __('Repository') }}
                        </a>

                        <a href="https://laravel.com/docs/starter-kits" 
                        target="_blank"
                        class="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-zinc-700 hover:bg-zinc-200  ">
                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                            </svg>
                            {{ __('Documentation') }}
                        </a>
                    </div>
                </nav>

                <!-- 用户菜单 -->
                <div class="relative px-4 py-4 border-t border-zinc-200" x-data="{ open: false }">
                    <button @click="open = !open" class="w-full flex items-center justify-between text-sm font-medium">
                        <div class="flex items-center">
                            <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                <span class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black ">
                                    {{ auth()->user()->initials() }}
                                </span>
                            </span>
                            <span class="ml-3 text-sm font-medium">{{ auth()->user()->name }}</span>
                        </div>
                        <svg x-bind:class="{'rotate-180': open}" xmlns="http://www.w3.org/2000/svg" class="transform transition-transform duration-200 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </button>
                    <div x-show="open" x-transition class="absolute bottom-full left-0 right-0 mb-2 py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10">
                        <div class="px-3 py-2.5">
                            <div class="flex items-center gap-2">
                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                    <span class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black ">
                                        {{ auth()->user()->initials() }}
                                    </span>
                                </span>

                                <div class="grid flex-1 text-left text-sm leading-tight">
                                    <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
                                    <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="border-t border-gray-100 "></div>

                        <a href="{{ route('settings.profile') }}" wire:navigate class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100  ">
                            <div class="flex items-center">
                                <svg class="mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                {{ __('Settings') }}
                            </div>
                        </a>

                        <div class="border-t border-gray-100 "></div>

                        <form method="POST" action="{{ route('logout') }}" class="w-full">
                            @csrf
                            <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100  ">
                                <div class="flex items-center">
                                    <svg class="mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                                    </svg>
                                    {{ __('Log Out') }}
                                </div>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="pl-64">
            {{ $slot }}
        </div>
        
        @livewireScripts
    </body>
</html>
